.particles {
    height: 100%;
    width: 100%;
}
.particles .particle {
    border-radius: 50%;
    position: absolute;
    background-color: white;
}
.particles .particle:nth-child(1) {
    top: 22%;
    left: 22%;
    height: 1.4px;
    width: 1.4px;
    -webkit-transition: all 2s ease;
    transition: all 2s ease;
    -webkit-animation: sparkle 20655ms -9830s ease-in-out infinite;
    animation: sparkle 20655ms -9830s ease-in-out infinite;
}
.particles .particle:nth-child(2) {
    top: 31%;
    left: 8%;
    height: 2.8px;
    width: 2.8px;
    -webkit-transition: all 2s ease;
    transition: all 2s ease;
    -webkit-animation: sparkle 23563ms -6854s ease-in-out infinite;
    animation: sparkle 23563ms -6854s ease-in-out infinite;
}
.particles .particle:nth-child(3) {
    top: 48%;
    left: 15%;
    height: 4.2px;
    width: 4.2px;
    -webkit-transition: all 2s ease;
    transition: all 2s ease;
    -webkit-animation: sparkle 24351ms -8548s ease-in-out infinite;
    animation: sparkle 24351ms -8548s ease-in-out infinite;
}
.particles .particle:nth-child(4) {
    top: 39%;
    left: 37%;
    height: 5.6px;
    width: 5.6px;
    -webkit-transition: all 2s ease;
    transition: all 2s ease;
    -webkit-animation: sparkle 22199ms -255s ease-in-out infinite;
    animation: sparkle 22199ms -255s ease-in-out infinite;
}
.particles .particle:nth-child(5) {
    top: 19%;
    left: 10%;
    height: 7px;
    width: 7px;
    -webkit-transition: all 2s ease;
    transition: all 2s ease;
    -webkit-animation: sparkle 22263ms -4484s ease-in-out infinite;
    animation: sparkle 22263ms -4484s ease-in-out infinite;
}
.particles .particle:nth-child(6) {
    top: 22%;
    left: 80%;
    height: 8.4px;
    width: 8.4px;
    -webkit-transition: all 2s ease;
    transition: all 2s ease;
    -webkit-animation: sparkle 20568ms -1014s ease-in-out infinite;
    animation: sparkle 20568ms -1014s ease-in-out infinite;
}
.particles .particle:nth-child(7) {
    top: 2%;
    left: 95%;
    height: 9.8px;
    width: 9.8px;
    -webkit-transition: all 2s ease;
    transition: all 2s ease;
    -webkit-animation: sparkle 21110ms -1269s ease-in-out infinite;
    animation: sparkle 21110ms -1269s ease-in-out infinite;
}
.particles .particle:nth-child(8) {
    top: 48%;
    left: 61%;
    height: 11.2px;
    width: 11.2px;
    -webkit-transition: all 2s ease;
    transition: all 2s ease;
    -webkit-animation: sparkle 24073ms -8350s ease-in-out infinite;
    animation: sparkle 24073ms -8350s ease-in-out infinite;
}
.particles .particle:nth-child(9) {
    top: 15%;
    left: 35%;
    height: 12.6px;
    width: 12.6px;
    -webkit-transition: all 2s ease;
    transition: all 2s ease;
    -webkit-animation: sparkle 23960ms -4081s ease-in-out infinite;
    animation: sparkle 23960ms -4081s ease-in-out infinite;
}
.particles .particle:nth-child(10) {
    top: 43%;
    left: 11%;
    height: 14px;
    width: 14px;
    -webkit-transition: all 2s ease;
    transition: all 2s ease;
    -webkit-animation: sparkle 23745ms -2024s ease-in-out infinite;
    animation: sparkle 23745ms -2024s ease-in-out infinite;
}
.particles .particle:nth-child(11) {
    top: 40%;
    left: 26%;
    height: 15.4px;
    width: 15.4px;
    -webkit-transition: all 2s ease;
    transition: all 2s ease;
    -webkit-animation: sparkle 24166ms -4383s ease-in-out infinite;
    animation: sparkle 24166ms -4383s ease-in-out infinite;
}
.particles .particle:nth-child(12) {
    top: 16%;
    left: 70%;
    height: 16.8px;
    width: 16.8px;
    -webkit-transition: all 2s ease;
    transition: all 2s ease;
    -webkit-animation: sparkle 24574ms -8252s ease-in-out infinite;
    animation: sparkle 24574ms -8252s ease-in-out infinite;
}
.particles .particle:nth-child(13) {
    top: 21%;
    left: 84%;
    height: 18.2px;
    width: 18.2px;
    -webkit-transition: all 2s ease;
    transition: all 2s ease;
    -webkit-animation: sparkle 24263ms -3941s ease-in-out infinite;
    animation: sparkle 24263ms -3941s ease-in-out infinite;
}
.particles .particle:nth-child(14) {
    top: 49%;
    left: 38%;
    height: 19.6px;
    width: 19.6px;
    -webkit-transition: all 2s ease;
    transition: all 2s ease;
    -webkit-animation: sparkle 20564ms -487s ease-in-out infinite;
    animation: sparkle 20564ms -487s ease-in-out infinite;
}
.particles .particle:nth-child(15) {
    top: 50%;
    left: 79%;
    height: 21px;
    width: 21px;
    -webkit-transition: all 2s ease;
    transition: all 2s ease;
    -webkit-animation: sparkle 23446ms -4107s ease-in-out infinite;
    animation: sparkle 23446ms -4107s ease-in-out infinite;
}
.particles .particle:nth-child(16) {
    top: 7%;
    left: 25%;
    height: 22.4px;
    width: 22.4px;
    -webkit-transition: all 2s ease;
    transition: all 2s ease;
    -webkit-animation: sparkle 24683ms -8294s ease-in-out infinite;
    animation: sparkle 24683ms -8294s ease-in-out infinite;
}
.particles .particle:nth-child(17) {
    top: 16%;
    left: 90%;
    height: 23.8px;
    width: 23.8px;
    -webkit-transition: all 2s ease;
    transition: all 2s ease;
    -webkit-animation: sparkle 23225ms -3037s ease-in-out infinite;
    animation: sparkle 23225ms -3037s ease-in-out infinite;
}
.particles .particle:nth-child(18) {
    top: 33%;
    left: 59%;
    height: 25.2px;
    width: 25.2px;
    -webkit-transition: all 2s ease;
    transition: all 2s ease;
    -webkit-animation: sparkle 20079ms -6761s ease-in-out infinite;
    animation: sparkle 20079ms -6761s ease-in-out infinite;
}
.particles .particle:nth-child(19) {
    top: 23%;
    left: 36%;
    height: 26.6px;
    width: 26.6px;
    -webkit-transition: all 2s ease;
    transition: all 2s ease;
    -webkit-animation: sparkle 21000ms -1600s ease-in-out infinite;
    animation: sparkle 21000ms -1600s ease-in-out infinite;
}
.particles .particle:nth-child(20) {
    top: 43%;
    left: 48%;
    height: 28px;
    width: 28px;
    -webkit-transition: all 2s ease;
    transition: all 2s ease;
    -webkit-animation: sparkle 24370ms -9288s ease-in-out infinite;
    animation: sparkle 24370ms -9288s ease-in-out infinite;
}

@-webkit-keyframes sparkle {
    0% {
        background-color: Rgba(255, 255, 255, 0.3);
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    25% {
        background-color: Rgba(255, 255, 255, 0.275);
        -webkit-transform: translateX(-41px) translateY(-24px);
        transform: translateX(-41px) translateY(-24px);
    }
    40% {
        background-color: Rgba(255, 255, 255, 0.26);
    }
    50% {
        background-color: Rgba(255, 255, 255, 0.616);
        -webkit-transform: translateX(-15px) translateY(-23px);
        transform: translateX(-15px) translateY(-23px);
    }
    60% {
        background-color: Rgba(255, 255, 255, 0.42);
    }
    75% {
        background-color: Rgba(255, 255, 255, 0.306);
        -webkit-transform: translateX(-50px) translateY(-37px);
        transform: translateX(-50px) translateY(-37px);
    }
    100% {
        background-color: Rgba(255, 255, 255, 0.3);
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}
@keyframes sparkle {
    0% {
        background-color: Rgba(255, 255, 255, 0.3);
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    25% {
        background-color: Rgba(255, 255, 255, 0.275);
        -webkit-transform: translateX(-41px) translateY(-24px);
        transform: translateX(-41px) translateY(-24px);
    }
    40% {
        background-color: Rgba(255, 255, 255, 0.26);
    }
    50% {
        background-color: Rgba(255, 255, 255, 0.616);
        -webkit-transform: translateX(-15px) translateY(-23px);
        transform: translateX(-15px) translateY(-23px);
    }
    60% {
        background-color: Rgba(255, 255, 255, 0.42);
    }
    75% {
        background-color: Rgba(255, 255, 255, 0.306);
        -webkit-transform: translateX(-50px) translateY(-37px);
        transform: translateX(-50px) translateY(-37px);
    }
    100% {
        background-color: Rgba(255, 255, 255, 0.3);
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}